<template>
	<!-- 修改手机号 -->
	<view class="content display  width-100 displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">修改手机号</text>
			</template>
		</u-navbar>

		<view class="content_all display width-100 displayColumn  all_item">
			<view class="fn_one display width_699  displayColumn displaycenter_jus M-T30">
				<view class="fn_one1 display ">
					<span class="fontSize font_comm M-L24">当前手机号：{{phone}}</span>
				</view>
				<view class="input_code display  width_699 displaycenter_aliem M-T12">
					<input type="number" class="input M-L24" placeholder-class="input_pl" placeholder="请输入验证码" />
					<view class="wrap M-L20">
						<!-- <u-toast ref="uToast"></u-toast> -->
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<!-- <u-button @tap="getCode"></u-button> -->
						<button class="display all_item fn_button fontSize font_comm" v-if="!flag"
							@tap="getCode">获取验证码</button>
						<button class="display all_item fn_button fontSize font_comm" v-else
							style="background: #72778A;color: #FFFFFF;">{{tips}}</button>
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="thre_button display  width_699 all_item" style="margin-top: 160rpx;">

				<button class="display all_item  fontSize font_comm fn_button2" style="background: #126BC9;"
					v-if="flag" @click="tosetPhone">输入新手机号</button>
				<button class="display all_item  fontSize font_comm fn_button2" v-else>输入新手机号</button>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				seconds: 120,
				flag: false,
				phone:'',
				// timer:120
			}
		},
		onLoad(options){
			this.phone = options.phone;
		},
		methods: {
			tosetPhone() {
				this.$tab.navigateTo('/packageA/setPhone/setPhone')
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 1000);
					this.$
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
				this.flag = false;
			},
			start() {
				uni.$u.toast('倒计时开始');
				this.flag = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.fn_one {
		height: 172rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.fn_one1 {
			span {
				font-weight: 600;
				font-size: 28rpx;
				color: #212121;
			}

		}
	}

	.input {
		width: 402rpx;
		height: 72rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #000;
		padding-left: 20rpx;
	}

	.input_pl {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
		padding-left: 20rpx;

	}

	.fn_one1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #212121;
	}

	.fn_button {
		width: 220rpx;
		height: 72rpx;
		background: #126BC9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF
	}

	.fn_button2 {
		width: 690rpx;
		height: 84rpx;
		background: #72778A;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>